<template>
  <div class="header-home">
    <div class="header-home-box">
      <van-icon class="header-home-spanthree" name="wap-nav" />
    </div>
    <div class="header-home-box">
      <div class="header-home-two">
        <span class="header-span-one">G</span>
        <span class="header-home-spanfour"
          ><van-icon class="span-o" name="search"
        /></span>
        <span class="header-span-two">家电返场同价11.11</span>
      </div>
    </div>

    <div class="header-home-box">
      <span class="header-login">登录</span>
    </div>
  </div>
</template>
         

<script>
export default {
  created() {
    this.scroll();
  },
  methods: {
    //滚动加红色
    scroll() {
      window.addEventListener("load", function () {
        var bgk = this.document.querySelector(".header-home");
        window.addEventListener("scroll", function () {
          if (window.scrollY >= 70) {
            bgk.style.backgroundColor = "red";
            bgk.style.zIndex = 99;
          } else {
            bgk.style.backgroundColor = "";
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header-home {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
}
.header-home-box {
  flex: 1;
}
.header-home-box {
  z-index: 99;
  width: 414.4px;
  height: 55.25px;
  /* background-color: antiquewhite; */
  margin: 0 auto;
}
.header-home-spanthree {
  width: 31.09px;
  height: 28.8px;
  font-size: 25px;
  color: #fff;
  float: left;
  padding-top: 10px;
}
.header-home-two {
  width: 282.13px;
  height: 33px;
  background-color: #fff;
  float: left;
  border-radius: 25px;
  // margin-left: 16px;
  margin-top: 10px;
}
.header-login {
  float: left;
  font-size: 15.5px;
  color: #ffffff;
  margin-top: 15px;
  margin-left: 10px;
}
.header-span-one {
  /* color: #f63515; */
  font-size: 22.1px;
  padding: 0 11px;
  font-weight: bold;
  border-right: 1px solid black;
}
.header-home-spanfour {
  padding: 0px 11px;
  width: 18px;
  height: 22px;
}
.span-o {
  /* font-size: ; */
  font-size: 25px;
}
.header-span-two {
  color: #666666;
  font-size: 13px;
}
.header-login {
  color: #ffffff;
  font-size: 16px;
}
</style>